<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    定义卡片标签-->
    <el-card class="box-card">
      <!--     定义一行元素 -->
      <el-row :gutter="20">
        <el-col :span="9">

          <!-- 定义新增用户输入框 -->
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"
                    class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <!--定义 新增用户按钮    -->
        <el-col :span="3">
          <el-button type="primary" @click="addUserDialogVisible=true">新增用户</el-button>
        </el-col>
      </el-row>
      <!--   使用表格功能   -->
      <el-table :data="userList" style="width: 100%" stripe border>
        <el-table-column prop="loginName" label="登录名"></el-table-column>
        <el-table-column prop="userName" label="真实姓名"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="role" label="管理权限">
          <!-- 使用scope封装的对象，获取行级元素 row属性实现 -->
          <template slot-scope="scope">
            <!--            {{ scope.row.status }}-->
            <el-switch
              v-model="scope.row.role"
              @change="updateStatus(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="showUpdateDialog(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteUser(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    定义分页功能  -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 4. 添加用户 -->
    <el-dialog
      title="用户新增"
      :visible.sync="addUserDialogVisible"
      @close="closeAddUserDialog"
      width="65%">
      <el-form :model="addUserForm" :rules="rules" ref="addUserForm"
               label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="addUserForm.loginName"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="userName">
          <el-input v-model="addUserForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="addUserForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserBtn">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 5. 定义修改用户的对话框 -->
    <el-dialog title="编辑用户" :visible.sync="updateDialogVisible"
               @close="closeUpdateDialog" width="65%">
      <el-form :model="updateUserForm" :rules="rules" ref="updateRuleForm"
               label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="updateUserForm.loginName" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="updateUserForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="updateUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="updateUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="updateUserForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserBtn">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // 自定义校验规则函数中的参数
    // rule:当前规则对象，一般不用
    // value：当前要校验的数据
    // callback：回调函数
    // 校验邮箱规则
    const checkEmail = (rule, value, callback) => {
      // 定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
      if (emailRege.test(value)) {
        // 表示邮箱合法 正确返回
        return callback()
      }
      callback(new Error('请填写正确的邮箱地址'))
    }

    // 校验手机号的邮箱规则
    const checkPhone = (rule, value, callback) => {
      // 定义校验手机号的正则语法
      const phoneRege = /^1[34578][0-9]{9}$/
      if (phoneRege.test(value)) {
        return callback()
      }
      callback(new Error('请填写正确的手机号'))
    }

    // 校验用户密码是否一致
    const checkPassword = (rule, value, callback) => {
      // if (this.addUserForm.password !== '') {
      //   // if (value !== this.addUserForm.password2) {
      //   //   callback(new Error('两次输入的密码不一致'))
      //   // }
      // }
      callback()
    }

    return {
      // 定义分页 查询 对象
      queryInfo: {
        query: '', // 用户查询的数据（输入框中的内容，可为null）
        pageNum: 1, // 分页查询的页数（默认第一页）
        pageSize: 5// 分页查询的条数（默认5条）
      },
      total: 0, // 查询的总记录数
      userList: [], // 分页查询的结果（对应到对象中的rows)
      addUserDialogVisible: false,
      updateDialogVisible: false,
      addUserForm: { // 设置 新增用户的对象
        loginName: '',
        userName: '',
        password: '',
        gender: '',
        email: '',
        mobile: ''
      },
      updateUserForm: { // 设置 修改用户的对象
        id: '',
        loginName: '',
        userName: '',
        mobile: '',
        email: '',
        password: ''
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          }
        ]
        ,
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '长度在 6 到 30 个字符',
            trigger: 'blur'
          },
          {
            validator: checkPassword,
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          {
            min: 11,
            max: 11,
            message: '长度在 11 个字符',
            trigger: 'blur'
          },
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 动态获取userList数据
    async getUserList () {
      const { data: result } = await this.$http.get('/admin/list', { params: this.queryInfo })
      if (result.status !== 200) {
        return this.$message.error('获取列表失败')
      }
      // 取出数据，设置绑定到属性中
      this.total = result.data.total
      this.userList = result.data.rows

      console.log(this.queryInfo)
      console.log(this.total)
      console.log(this.userList)
    },
    handleSizeChange (val) {
      // 查询条件发生了变化：从val属性中可以获得当前被选中的页中记录大小
      this.queryInfo.pageSize = val

      // 重新查询数据
      this.getUserList()
    },
    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getUserList()
    },
    async updateStatus (user) {
      console.log('状态发生改变了')
      // let url = "/user/status/"+user.id+"/"+user.status;
      // 模板字符串写法 ``，可以编辑多行代码，可以直接对象取值${obj.key} ${key}
      // es6中提供的高端写法
      const url = `/admin/status/${user.id}/${user.role}`
      console.log(url)
      const { data: result } = await this.$http.put(url)
      if (result.status !== 200) return this.$message.error('更新操作失败')
      this.$message.success('更新操作成功！')
    },
    closeAddUserDialog () {
      // 当对话框关闭时，应该重置表单
      this.$refs.addUserForm.resetFields()
      console.log('重置表单中的数据')
    },
    closeUpdateDialog () {
    },
    addUserBtn () {
      this.$refs.addUserForm.validate(async valid => {
        if (!valid) {
          return this.$message.error('请正确填写数据')
        }

        const { data: result } =
          await this.$http.post('/admin/addUser', this.addUserForm)

        if (result.status !== 200) {
          return this.$message.error('新增用户失败')
        }

        this.$message.success('新用户成功')

        // 新增成功，当对话框关闭
        this.addUserDialogVisible = false
        // 刷新列表
        this.getUserList()
      })
    },
    async deleteUser (user) {
      /* const result = this.$confirm('此操作将永久删除'+user.username+', 是否继
      续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      });
      console.log(result); // 没有async await关键字，输出的是promise对象
      */
      const result = await this.$confirm('此操作将永久删除' + user.loginName + ', 是否继续 ? ',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => error)
      /* // then()函数省略：使用await和async关键字解构出data数据，confirm cancel，避
      免了写then函数
      // .catch(error => error); catch函数，用于处理异常；
      // 底层使用抛出异常的形式，体现用户点击了 取消 按钮
      // .catch((error) => {return error;});
      // 回调函数中参数，是异常的消息；
      // return error; 是指将具体的异常消息作为结果返回
      // 简化原理：
      // 只有一个参数，圆括号省略
      // 函数体中只有一行代码，花括号可省略；默认将最后一行代码的结果作为返回值
      // 因此可简化为：error => error */
      console.log(result) // 确定按钮返回“confirm”；点击取消，得到的是cancel
      // 确定 confirm，取消 cancel
      if (result !== 'confirm') return this.$message.info('用户取消操作')
      // 用户点击了确定按钮，发起ajax请求
      // this.$message.info("用户点击了确认按钮");
      const { data: sysResult } = await this.$http.delete('/admin/' + user.id)
      if (sysResult.status !== 200) {
        return this.$message.error('用户删除失败')
      }
      this.$message.success('用户删除成功')

      // 重新计算当前多少页
      const totalPage = Math.ceil((this.total - 1) / this.queryInfo.pageSize)// 判断删除是不是最后一页的最后一条数据
      const pageNum = this.queryInfo.pageNum > totalPage ? totalPage : this.queryInfo.pageNum
      this.queryInfo.pageNum = pageNum < 1 ? 1 : pageNum
      // 重新加载用户列表
      this.getUserList()
    },
    async showUpdateDialog (user) {
      this.updateDialogVisible = true
      // 动态获取想要的数据
      // 方式1：根据id发起ajax请求，获取最新的数据
      const { data: result } = await this.$http.get('/admin/' + user.id)
      if (result.status !== 200) return this.$message.error('查询用户失败')
      this.updateUserForm.id = result.data.id;
      this.updateUserForm.mobile = result.data.mobile;
      this.updateUserForm.email = result.data.email;
      this.updateUserForm.userName = result.data.userName;
      this.updateUserForm.loginName = result.data.loginName;
      this.updateUserForm.password = result.data.password;
      console.log(this.updateUserForm)
      // 方式2：从页面中获取数据（不推荐，数据不是最新的！）
      // this.updateUserForm = user;
    },
    async updateUserBtn () {
      this.$refs.updateRuleForm.validate(async valid => {
        if (!valid) {
          return this.$message.error('请正确填写数据')
        }

        const { data: result } = await this.$http.put('/admin/updateUser', this.updateUserForm)
        if (result.status !== 200) return this.$message.error('修改用户失败')
        console.log(result.message)
        this.updateDialogVisible = false
        this.getUserList()
      })
    }
  },
  mounted () { // 当页面加载完成之后，执行mounted
    // 获取userList列表数据
    this.getUserList()
  }

}
</script>

<!--lang="less"支持less语法样式-->
<style lang="less" scoped>

</style>
